<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-select
          v-model="searchWords.isShare"
          clearable
          placeholder="状态"
          style="width: 100px"
        >
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="initList(1)" />
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #isShare="{ row }">
          {{ row.isShare == 1 ? "已分享" : row.isShare == 2 ? "未分享" : "-" }}
        </template>
        <template #content="{ row }">
          <div
            :title="row?.content"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            "
          >
            {{ row?.content }}
          </div>
        </template>
        <template #location="{ row }">
          <div
            :title="row?.location"
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            "
          >
            {{ row?.location }}
          </div>
        </template>
        <template #operation="{ row }">
          <el-button
            v-if="row.publishState != 2"
            :icon="Position"
            plain
            type="warning"
            size="small"
            @click="edit(row, '1')"
          >
            分享
          </el-button>
          <el-button
            :icon="View"
            size="small"
            plain
            type="success"
            @click="edit(row, '2')"
          >
            详情
          </el-button>
        </template>
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      v-model:editType="editType"
      v-model:shareUrl="shareUrl"
      v-model:shareQrUrl="shareQrUrl"
      :parent-menu-option="tableData.data"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage } from "element-plus";
import EditForm from "./components/EditForm.vue";
import {Position, Search, View} from "@element-plus/icons-vue";
import Page from "@/components/pageTable/Page.vue";
import {
  pageHidden,
  selectHiddenById,
  shareWord,
} from "@/api/randomClappingManage.ts";
import { baseURL } from "@/util/request";

let rowData: any;
let filterData = reactive({ name: "" });
const editFormVisible = ref<boolean>(false);
const tableRef = ref();
const shareUrl = ref<string>("");
const shareQrUrl = ref<string>("");
const editType = ref<string>("");
const date = ref<string[]>();
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});
const stateList = [
  { value: "1", label: "已分享" },
  { value: "2", label: "未分享" },
];
const searchWords = reactive({
  isShare: "",
  startTime: "",
  endTime: "",
});
const tableData = reactive({
  columns: [
    { label: "状态", prop: "isShare", width: 70, template: true },
    { label: "隐患内容", prop: "content", minWidth: 330, template: true },
    { label: "隐患位置", prop: "location", width: 440, template: true },
    { label: "联系电话", prop: "phone", width: 120 },
    { label: "上报时间", prop: "createdAt", width: 160 },
    {
      label: "操作",
      prop: "operation",
      template: true,
      align: "left",
      width: 170,
    },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    ...searchWords,
  };
  tableData.loading = true;
  const { data, msg, success } = await pageHidden(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

async function edit(row: any, sign: string) {
  editType.value = sign;
  let api = shareWord;
  if (sign == "2") {
    api = selectHiddenById;
  }
  const { data, msg, success } = await api({ id: row.id,urlPrefix:baseURL });
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  if (sign == "1") {
    shareUrl.value = data.shareUrl;
    shareQrUrl.value = data.shareQrUrl;
  } else {
    rowData = data;
  }
  editFormVisible.value = true;
}
onMounted(async () => {
  await initList(pageData.pageNum);
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords, async () => {
  await initList(1);
});
watch(date, (value) => {
  searchWords.startTime = value?.[0] ? `${value?.[0]}` + " 00:00:00" : " ";
  searchWords.endTime = value?.[1] ? `${value?.[1]}` + " 23:59:59" : "";
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
:deep(.el-dialog__body) {
  padding: 0 20px 20px 20px;
}
</style>
